<template>
    <div class="record">
        <div class ="box">
            <div v-if="recordLists.length == 0" class="norecord">暂无停车记录，快去停车吧~</div>
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text=""
                    @load="onLoad">
                <div class="openout">
                    <div class="record-list" v-for="(item,key) in recordLists" :key="key">
                        <div class="item" @click="goToView('/pay_success?orderNo='+ item.orderNo) ">
                            <div class="record-info">
                                <div class="title">{{ item.carNo }}</div>
                                <div class="subtitle">缴费时间：{{ item.payDate }}</div>
                                <div class="subtitle">停车时长：{{ item.time }}</div>
                            </div>
                            <div class="price-info">
                                <span class="price">
                                    <i class="is-red">{{ item.money }}</i>元
                                </span>
                                <span class="iconfont icon-enter" @click="goToView('/pay_success?orderNo='+ item.orderNo) ">
                                    <van-icon name="arrow" size="20" />
                                </span>
                            </div>
                        </div>
                        <i class="payInfo-line"></i>

                    </div>
                </div>
            </van-list>
        </div>
    </div>

</template>

<script>
    import {NavBar, Toast, Dialog, Icon} from 'vant';
    const limit = 4
    import "./css/parking.css";
    import Cookies from 'js-cookie'
    export default {
        name: "record",
        data() {
            return {
                token: '',
                pageNo:0,
                loading:false,
                finished:false,
                recordLists: []
            }
        },
        mounted(){
            this.token = Cookies.get("token")
            this.record()
        },
        methods: {
            record(){
                this.$api.parking.orderRecord({openId: this.token, pageNo:this.pageNo, limit:limit}).then(res=>{
                    if(res.code==0){
                        this.loading=false
                        var data = res.data
                        var success = data.success
                        if(success){
                            this.recordLists = this.recordLists.concat(data.orderRecord)
                            this.pageNo++
                        }else{
                            this.finished=true
                            // Toast("没有更多了")
                        }
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
            onLoad(){
                if(this.pageNo >0) {
                    this.record()
                }
            },
            goToView(path) {
                if (!path || path.length <= 0) {
                    Toast("功能尚未开启，敬请期待！")
                    return;
                }
                if (path.indexOf('https') != -1) {
                    window.location.href = path;
                    return;
                }
                this.$router.push(path)
            }
        }
    }
</script>

<style lang="less">

    .record {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        height: 100%;
        /*background: url(img/bg1.jpg) center no-repeat;*/
        background-size: cover;
    }

    .box {
        position: relative;
        overflow: auto;
        padding: 2.66667vw 0;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-box-flex: 1;
        box-flex: 1;
        -webkit-overflow-scrolling: touch;
    }

    .payInfo-line {
        display: block;
        width: calc(100% - 2.5rem);
        height: 1px;
        background-color: #afaeac;
        margin: 0 1.25rem 0 1.25rem;
    }

</style>